<template>
  <div class="PromotionAnalysis-container">
    <!-- 栅格 输入框 和按钮 -->
    <el-row class="filterCondition">
      <el-form
        label-width="82px"
        label-position="right"
        ref="formLabelAlign"
        :model="formLabelAlign"
      >
        <el-form-item prop="city" label="城市" v-if="ShowCity">
          <el-select v-model="formLabelAlign.city" placeholder="请选择城市">
            <el-option label="所有" value></el-option>
            <el-option
              v-for="item in cityselectList"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="层级">
          <!-- <el-select v-model="formLabelAlign.searchType" placeholder="请选择搜索类型" id="TeamOrGuWen">
            <el-option label="顾问" value="guwen"></el-option>
            <el-option label="团队" value="team"></el-option>
          </el-select>-->
          <el-select v-model="formLabelAlign.scopeOf" id="otherThing" placeholder>
            <!-- <el-option label="所有" value=""></el-option> -->
            <!-- <el-option label="分公司" value="fenGS" v-show="showCengJi.fenGS"></el-option>
            <el-option label="区域" value="quyu" v-show="showCengJi.quyu"></el-option>
            <el-option label="部门" value="bumen" v-show="showCengJi.bumen"></el-option>
            <el-option label="顾问" value="guwen" v-show="showCengJi.guwen"></el-option>-->
            <el-option label="分公司" value="fenGS"></el-option>
            <el-option label="区域" value="quYu"></el-option>
            <el-option label="部门" value="user"></el-option>
            <el-option label="顾问" value="guWen"></el-option>
          </el-select>
          <el-input v-model="formLabelAlign.scopeOfValue" class="yaosile" id="addThing"></el-input>
        </el-form-item>
        <el-form-item label="选择月份">
          <!-- <div class="block"> -->
          <!-- <el-date-picker
              v-model="value1"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy/MM/dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>-->
          <div class="block">
            <el-date-picker
              v-model="formLabelAlign.value1"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
            ></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item class="BTN">
          <el-button
            style="background-color:#c73e3a;color:#fff"
            @click="checkCus"
            class="check"
            :disabled="disTBN"
          >查询</el-button>
          <!-- <el-button style="background-color:	#00CDCD;color:#fff" @click="resetForm('formLabelAlign')"   class="check">重置筛选条件</el-button> -->
        </el-form-item>
      </el-form>
    </el-row>
    <!-- Ecahrts -->
    <el-row class="filterCondition" v-loading="loading">
      <!-- <h3>推广数据统计分部图</h3> -->
      <div id="main" style="width: 100%;height: 500px;"></div>
    </el-row>
  </div>
</template>

<script>
// 导入时间戳
import moment from "moment";
import echarts from "echarts";
export default {
  name: "PromotionAnalysis",
  // 数据
  data() {
    return {
      currentUser: {
        currentName: "",
        currentId: "",
        currentLevel: "",
        currentPhone: "",
        currentcity: ""
      },
      ShowCity: false,
      loading: true,
      showTimeKind: true,
      //未分割的完整版时间区间
      value1: "",
      //时间区间隐藏状态
      isShow: false,
      //禁用按钮的状态值
      disTBN: false,
      cityselectList: [{ id: 0, name: "请先选择城市" }],
      cengJiList: [
        { id: "fenGS", name: "分公司" },
        { id: "quYu", name: "区域" },
        { id: "buMen", name: "部门" },
        { id: "user", name: "顾问" }
      ],
      //时间选择生成内容
      timeList: [
        { id: "today", name: "今日" },
        { id: "yestoday", name: "昨日" },
        { id: "sevenDay", name: "最近七天" },
        { id: "tomonth", name: "本月" },
        { id: "yesmonth", name: "上月" },
        { id: "customize", name: "自定义" }
      ],
      //客户筛选区域数据
      formLabelAlign: {
        scopeOf: "user", //	层级
        city: "上海", //	状态
        timeType: "", //时间类型
        dayType: "",
        beginTime: "", //开始时间
        endTime: "", //	结束时间
        value1: "", //	结束时间
        pageSize: "", //分页大小
        currentPage: "", //	当前页码
        scopeOfValue: ""
      },
      //echarts
      timeData: Array(31)
        .fill()
        .map((_, i) => i + 1),
      BenYueData: [
        310,
        220,
        182,
        191,
        234,
        290,
        330,
        392,
        301,
        334,
        390,
        330,
        320,
        610,
        298,
        358,
        182,
        491,
        234,
        290,
        330,
        392,
        301,
        334
      ],
      ShangYueData: [
        258,
        320,
        332,
        301,
        334,
        390,
        330,
        320,
        1294,
        290,
        300,
        332,
        301,
        332,
        301,
        334,
        332,
        301,
        334,
        390,
        330,
        320,
        1294,
        290
      ]
    };
  },
  methods: {
    hiddenCengJi() {
      for (let key in this.tableDepartmentShows) {
        this.tableDepartmentShows[key] = false;
      }
    },

    //将按钮禁用两秒
    disButton() {
      this.disTBN = true;
      setTimeout(() => {
        this.disTBN = false;
      }, 2000);
    },
    //查询
    checkCus() {
      this.disButton();
      this.loading = true;
      // if (this.currentUser.currentcity == null) {
      //   if (this.ShowCity == true && this.formLabelAlign.city == "") {
      //     this.$message.error("请选择城市");
      //     return false;
      //   }
      // } else if (this.formLabelAlign.scopeOf == "city") {
      //   this.hiddenCengJi();
      //   this.tableDepartmentShows.cityShow = true;
      // } else if (this.formLabelAlign.scopeOf == "fenGS") {
      //   this.hiddenCengJi();
      //   this.tableDepartmentShows.fenShow = true;
      // } else if (this.formLabelAlign.scopeOf == "quyu") {
      //   this.hiddenCengJi();
      //   this.tableDepartmentShows.quyuShow = true;
      // } else if (this.formLabelAlign.scopeOf == "bumen") {
      //   this.hiddenCengJi();
      //   this.tableDepartmentShows.bumenShow = true;
      // } else if (this.formLabelAlign.scopeOf == "guwen") {
      //   this.hiddenCengJi();
      //   this.tableDepartmentShows.bumenShow = true;
      //   this.tableDepartmentShows.guWenShow = true;
      // } else if (this.formLabelAlign.scopeOf == "") {
      //   this.hiddenCengJi();
      //   // this.tableDepartmentShows.dateShow = true;
      // }

      // window.console.log(this.formLabelAlign.value1)
      // window.console.log(this.formLabelAlign.city)
      // window.console.log(this.formLabelAlign.scopeOfValue)
      // window.console.log(this.formLabelAlign.scopeOf)
      this.$axios
        .get(
          // `/spider/statistical/billSchedule?year=${
          `/spider/statistical/billSchedule?year=${
            this.formLabelAlign.value1.split("-")[0]
          }&month=${this.formLabelAlign.value1.split("-")[1]}&city=${
            this.formLabelAlign.city
          }&userId=${sessionStorage.getItem("id")}&otherScopeOf=${
            this.formLabelAlign.scopeOf
          }&otherName=${this.formLabelAlign.scopeOfValue}`
        )
        .then(res => {
          // console.log(res);
          if (res.data.messageModel.code == 0) {
            this.BenYueData = res.data.dataModel;
            // this.BenYueData.shift()
            // window.console.log(this.BenYueData);

            let year = this.formLabelAlign.value1.split("-")[0];
            let month = this.formLabelAlign.value1.split("-")[1];

            if (month == "01") {
              year--;
              month = 12;
            } else {
              month--;
            }
            this.$axios
              .get(
                `/spider/statistical/billSchedule?year=${year}&month=${month}&city=${
                  this.formLabelAlign.city
                }&userId=${sessionStorage.getItem("id")}&otherScopeOf=${
                  this.formLabelAlign.scopeOf
                }&otherName=${this.formLabelAlign.scopeOfValue}`
              )
              .then(res2 => {
                if (res.data.messageModel.code == 0) {
                  this.ShangYueData = res2.data.dataModel;
                  this.ShangYueData.unshift(0)
                  this.drawPie("main");
                } else {
                  this.$message.error(res.data.messageModel.messageText);
                  this.BenYueData = [];
                }
              }).catch(err => {
                window.console.log(err)
              });
          } else {
            this.$message.error(res.data.messageModel.messageText);
            this.ShangYueData = [];
          }
          // window.console
          this.loading = false;
        })
        .catch(err => {
          window.console.log(err);
        });
      // if (this.value1 != "" || this.formLabelAlign.dayType == "customize") {
      //   this.formLabelAlign.beginTime = this.value1[0];
      //   this.formLabelAlign.endTime = this.value1[1];
      //   if (this.formLabelAlign.beginTime == this.formLabelAlign.endTime) {
      //     this.formLabelAlign.beginTime =
      //       this.formLabelAlign.beginTime + " " + "00:00:00";
      //     this.formLabelAlign.endTime =
      //       this.formLabelAlign.endTime + " " + "23:59:59";
      //   }
      // } else {
      //   this.formLabelAlign.beginTime = "";
      //   this.formLabelAlign.endTime = "";
      // }
    },
    drawPie(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        title: {
          text: "业绩数据统计分布图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: [
            "本月",
            "上月"
            // '对比数值'
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: this.timeData
          }
        ],
        yAxis: [
          {
            max: function(value) {
              return Math.round(value.max*1.2/100000)*100000;
            },
            type: "value"
          }
        ],
        series: [
          {
            name: "本月",
            type: "line",
            stack: "总量1",
            color: "#409ed9",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "blue" },
                  { offset: 0.5, color: "skyblue" },
                  { offset: 1, color: "white" }
                ])
              }
            }, 
            data: this.BenYueData
          },
          {
            name: "上月",
            type: "line",
            stack: "总量2",
            color: "#f0ce1d",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "yellow" },
                  { offset: 0.5, color: "yellowgreen" },
                  { offset: 1, color: "white" }
                ])
              }
            }, 
            data: this.ShangYueData
          }
          // {
          //     name:'对比数值',
          //     type:'line',
          //     stack: '总量3',
          //     label: {
          //         normal: {
          //             // show: true,
          //             // position: 'top'
          //         }
          //     },
          //     areaStyle: {normal: {}},
          //     data:[999, 820, 932, 901, 934, 1290, 1330, 1320, 258, 1593, 1111, 2589, 369 ,689, 1425, 2631, 3932, 901, 934, 1290, 1330, 1320, 258, 1593, 1111]
          // }
        ]
      });
      this.charts.resize();
    }
    
  },
  // 本地过滤器
  filters: {
    formatTime(value) {
      if (value == null) {
        return "";
      }
      // return moment(value).format("YYYY-MM-DD HH:mm:ss");
      return moment(value).format("YY-MM-DD");
    }
  },
  created() {
    this.loading = true;
    // if (window.sessionStorage.getItem("prohibitLogin") == "true") {
    this.currentUser.currentName = window.sessionStorage.getItem("name");
    this.currentUser.currentid = window.sessionStorage.getItem("id");
    this.currentUser.currentLevel = window.sessionStorage.getItem("userLevel");
    this.currentUser.currentcity = window.sessionStorage.getItem(
      "departmentName1"
    );
    if (
      this.currentUser.currentLevel == 0 &&
      this.currentUser.currentcity == "null"
    ) {
      // this.formLabelAlign.city = "all";
      this.ShowCity = true;
      //获取所有城市
      this.$axios
        .get(`/spider/department/getAll`)
        .then(res => {
          // console.log(res);
          this.cityselectList = res.data;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    } else {
      this.formLabelAlign.city = this.currentUser.currentcity;
    }
    let date = new Date();
    this.formLabelAlign.value1 =
      date.getFullYear() + "-" + (date.getMonth() + 1);
  },
  // methods:{

  // },
  mounted() {
    this.$nextTick(function() {
      // this.drawPie("main");
      this.checkCus();
    });
    // this.screenWidth = document.body.clientWidth - 190;
    window.onresize = () => {
      // this.screenWidth = document.body.clientWidth - 190;
      this.checkCus();
    };
  },
  //抽取到vuex中试一试
  computed: {
    //  Echartsdata(){
    //    return this.$store.state.common.Echartsdata;
    //  },
    //  EchartsListdata(){
    //    return this.$store.state.common.EchartsListdata;
    //  }
  }
};
</script>

<style  lang='scss'>
.PromotionAnalysis-container {
  //echarts的样式
  * {
    // margin: 0;
    // padding: 0;
    list-style: none;
  }

  .el-form-item.BTN {
    /deep/.el-form-item__content {
      margin-left: 20px !important;
    }
  }
  input.el-input__inner {
    width: 170px;
    height: 32px;
    padding-left: 10px;
  }
  // 时间分类框样式
  input.el-input__inner#kinds,
  /deep/input.el-input__inner#time {
    // width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  // 日期选择器
  daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 240px;
    height: 36px;
    vertical-align: middle;
    .el-date-editor .el-range__icon {
      line-height: 27px;
    }
    .el-date-editor .el-range-separator {
      width: 5%;
    }
    /deep/.block,
    #block {
      border: none !important;
      /deep/.el-date-editor--daterange {
        width: 240px !important;
      }
    }
  }
  .el-form-item {
    display: inline-block;
    margin: 3px 0 3px 10px;
  }
  .el-form-item:nth-child(n + 6) {
    margin-top: 0;
  }
  .el-select.time {
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner.fanwei {
    padding-right: 30px;
    width: 30px;
  }
  .filterCondition {
    background-color: #fff;
    margin-bottom: 20px;
  }
  .check {
    margin-left: 22px;
    padding: 8px 20px;
  }
  .ell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.9;
  }
  //分页框样式设置（避免页面被覆盖）
  .el-pagination .el-input__inner {
    width: 100px;
  }
  input.el-input__inner#otherThing,
  input.el-input__inner#TeamOrGuWen,
  input.el-input__inner#addThing {
    width: 85px;
    padding-left: 7px;
    height: 32px !important;
  }
  .yaosile {
    width: 85px;
  }
  .el-date-editor--month > input {
    text-indent: 50px;
  }
  .class {
    color: yellowgreen;
  }
}
</style>